<div id="tab-4" class="tab-item tab-connect">
    <h3 style="padding: 40px 40px 0 40px;">QUẢN LÝ KẾT NỐI CỦA BẠN </h3>

    <p style="padding: 10px 40px 20px 40px">Bạn có thể kết nối với facebook, twitter, zing, pinterest và
        nhiều các trang blog khác nhau.<br/>
        Với kết nối bạn có thể twitter, Like và tương tác với các Buzzers khác ngay tại trang chủ của các chiến
        dịch mà bạn tham gia.
    </p>

    <!--Ket noi facebook-->
    <div class="connect-item col-odd">
        <div class="connect-item-main">
            <div class="connect-item-page connect-facebook"></div>
            <div class="connect-item-avatar">
                <?php
                    if(isset($fb_id) && $fb_id != 0){
                        echo '<img src="http://graph.facebook.com/'.$fb_id.'/picture?type=square"/>';
                    }else{
                        echo '<img src="'.ROOT_URL.'public/images/b.png">';
                    }
                ?>
            </div>
            <div class="connect-item-name">
                <?php
                    if(isset($fb_token) && $fb_token != ""){
                        echo $fb_user;
                    }else{
                        echo 'Chưa kết nối';
                    }
                ?>
            </div>
            <div class="connect-item-link">
                <?php
                    if (isset($fb_token) && $fb_token != "") {
                        echo 'Ngừng kết nối';
                    } else {
                        echo '<div id="facebook_connect" class="connect-item-button"> Kết nối</div>';
                    }
                ?>
            </div>
            <div class="connect-item-notice"><i class="fa fa-caret-right"></i> BẠN LÀM GÌ VỚI KẾT NỐI NÀY?</div>
        </div>
        <div class="connect-item-child">
            <p>Manage your Facebook permissions for Buzzy.vn</p>
            <p>Buzzy your Facebook friends right from the homepage of any BzzAgent program you're participating in</p>
        </div>
    </div>

    <!-- ket noi twitter -->
    <div class="connect-item col-even">
        <div class="connect-item-main">
            <div class="connect-item-page connect-twitter"></div>
            <div class="connect-item-avatar">
                <?php
                    if(isset($twitter_picture) && $twitter_picture != ""){
                        echo '<img title="Twitter" src="'.$twitter_picture.'">';
                    }else{
                        echo '<img title="Buzzy" src="'.ROOT_URL.'public/images/b.png">';
                    }
                ?>
            </div>
            <div class="connect-item-name">
                <?php
                    if(isset($twitter_user) && $twitter_user != ""){
                        echo $twitter_user;
                    }else{
                        echo 'Chưa kết nối';
                    }
                ?>
            </div>
            <div class="connect-item-link">
                <?php
                    if (isset($twitter_token) && $twitter_token !="") {
                        echo 'Ngừng kết nối';
                    } else {
                        echo '<div id="twitter_connect" class="connect-item-button">Kết nối</div>';
                    }
                ?>
            </div>
            <div class="connect-item-notice"><i class="fa fa-caret-right"></i> BẠN LÀM GÌ VỚI KẾT NỐI NÀY?</div>
        </div>
        <div class="connect-item-child">
            <p>Manage your Facebook permissions for Buzzy.vn</p>
            <p>Buzzy your Facebook friends right from the homepage of any BzzAgent program you're participating in</p>
        </div>

    </div>

    <!-- ket noi google -->
    <div class="connect-item col-odd">
        <div class="connect-item-main">
            <div class="connect-item-page connect-google-plus"></div>
            <div class="connect-item-avatar">
                <img src="<?php echo ROOT_URL; ?>public/images/b.png">
            </div>
            <div class="connect-item-name">dotuan9x</div>
            <div class="connect-item-link">
                <?php
                    if (isset($conGoogle) && $conGoogle == true) {
                        echo 'Ngừng kết nối';
                    } else {
                        ?>
                            <div id="google_connect" class="connect-item-button">
                                Kết nối
                            </div>
                        <?php
                    }
                ?>
            </div>
            <div class="connect-item-notice"><i class="fa fa-caret-right"></i> BẠN LÀM GÌ VỚI KẾT NỐI NÀY?</div>
        </div>
        <div class="connect-item-child">
            <p>Manage your Facebook permissions for Buzzy.vn</p>
            <p>Buzzy your Facebook friends right from the homepage of any BzzAgent program you're participating in</p>
        </div>
    </div>

    <!-- ket noi linkedin -->
    <div class="connect-item col-even">
        <div class="connect-item-main">
            <div class="connect-item-page connect-linkedin"></div>
            <div class="connect-item-avatar">
                <img src="<?php echo ROOT_URL; ?>public/images/b.png">
            </div>
            <div class="connect-item-name">dotuan9x</div>
            <div class="connect-item-link">
                <?php
                    if (isset($conLinked) && $conLinked == true) {
                        echo 'Ngừng kết nối';
                    } else {
                        echo '<div id="linked_connect" class="connect-item-button">Kết nối</div>';
                    }
                ?>
            </div>
            <div class="connect-item-notice"><i class="fa fa-caret-right"></i> BẠN LÀM GÌ VỚI KẾT NỐI NÀY?</div>
        </div>
        <div class="connect-item-child">
            <p>Manage your Facebook permissions for Buzzy.vn</p>
            <p>Buzzy your Facebook friends right from the homepage of any BzzAgent program you're participating in</p>
        </div>
    </div>

    <p style="padding: 20px 40px 40px 40px">
        Bạn có thể kết nối với nhiều trang blogs mà bạn có. Buzzie có thể cho bạn thật nhiều thông tin hữu ích mà người khác chưa có được về sản phẩm mới để bạn có thể trở thành trung tâm ảnh hưởng trong cộng đồng mạng của bạn.
    </p>

</div>

<script>
    $(function () {

        $('.connect-item-notice').click(function(){
            $(this).parent().parent().find('.connect-item-child').toggle();
        });


        $.ajax({
            type:"POST",
            url:"account/conGoogle",
            data:{},
            success:(function(data){

            })
        });

        //load url connect linked.
        $.ajax({
            type:"POST",
            url:"account/linkedUrl",
            dataType:"json",
            data:{},
            success:(function(data){
                if(data.status == "ok"){
                    var url = data.url;
                    $('#linked_connect').attr('src', url);
                }
            })
        });

        $.ajax({
            type:"POST",
            url:"account/facebookUrl",
            dataType:"json",
            data:{},
            success:(function(data){
                if(data.status == "ok"){
                    var url = data.url;
                    $('#facebook_connect').attr('src', url);
                }
            })
        });

        $.ajax({
            type:"POST",
            url:"account/googleUrl",
            dataType:"json",
            data:{},
            success:(function(data){
                if(data.status == "ok"){
                    var url = data.url;
                    $('#google_connect').attr('src', url);
                }
            })
        });

        $.ajax({
            type:"POST",
            url:"account/twitterUrl",
            dataType:"json",
            data:{},
            success:(function(data){
                if(data.status == "ok"){
                    var url = data.url;
                    $('#twitter_connect').attr('src', url);
                }
            })
        });

        $('#facebook_connect').click(function(){
            var url = $(this).attr('src');
            var win = popupwindow(url, 'Facebook', 450, 450);
            var timer = setInterval(function() {
                if(win.closed) {
                    clearInterval(timer);
                    //alert('closed');
                }
            }, 1000);

        });

        $('#google_connect').click(function(){
            var url = $(this).attr('src');
            var win = popupwindow(url, 'Google', 450, 450);
            var timer = setInterval(function() {
                if(win.closed) {
                    clearInterval(timer);
                    //alert('closed');
                }
            }, 1000);
        });

        $('#twitter_connect').click(function(){
            var url = $(this).attr('src');
            var win = popupwindow(url, 'Twitter', 450, 450);
            var timer = setInterval(function() {
                if(win.closed) {
                    clearInterval(timer);
                    //alert('closed');
                }
            }, 1000);
        });

        $('#linked_connect').click(function(){
            var url = $(this).attr('src');
            var win = popupwindow(url, 'Linked', 450, 450);
            var timer = setInterval(function() {
                if(win.closed) {
                    clearInterval(timer);
                    alert('closed');
                }
            }, 1000);

        });

    });

    function popupwindow(url, title, w, h) {
        var left = (screen.width/2)-(w/2);
        var top = (screen.height/2)-(h/2);
        return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
    }

</script>